<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 基础选择器 */
        div[class^="content"] {
            /* 属性选择器：选择class属性以"content"开头的所有div元素 */
            background-color: lightblue;
        }

        /* 关系选择器 */
        h2+p {
            /* 兄弟选择器：选择紧接在h2元素之后的第一个p元素 */
            font-weight: bold;
        }

        .container>p {
            /* 子元素选择器：选择.container元素的所有直接子元素p */
            color: darkgreen;
        }

        /* 伪元素选择器 */
        a::before {
            /* 在a元素内容前插入内容 */
            content: "[link] ";
            color: orange;
        }

        a:hover::after {
            /* 在鼠标悬停在a元素上时，在其内容后插入内容 */
            content: " [visited]";
            color: darkred;
        }
    </style>
</head>

<body>
    <div class="content-header">Header</div>
    <div class="content-body">Body Content</div>

    <h2>Heading</h2>
    <p>This paragraph will be bold because it's the first paragraph after an h2.</p>
    <div class="container">
        <p>Direct child paragraph, its color will be dark green.</p>
    </div>

    <a href="#">Visit this page</a>
</body>

</html>